<template>
  <div class="payment-page">
    <div class="container">
      <div class="payment-content">
        <div class="qrcode-section">
          <img src="https://bu.dusays.com/2024/11/19/673c38eb77d69.jpg" alt="支付二维码" class="qrcode-image" />
          <p>请使用手机扫描上方二维码进行支付</p>
        </div>
        <div class="status-options">
          <button @click="handlePaymentStatus('success')" class="status-button success">我已付款</button>
          <button @click="handlePaymentStatus('failure')" class="status-button failure">付款未成功</button>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import { ref } from 'vue';
import request from '../../utils/request';
import { useRoute } from 'vue-router';
import { ElNotification } from 'element-plus';
import { ElLoading } from 'element-plus'
import router from '../../router';
const statusMessage = ref('');

const route = useRoute();
const trackingNumber = route.params.trackingNumber;

const handlePaymentStatus = (status) => {
  const loading = ElLoading.service({
    lock: true,
    text: '用户正在支付中，吱吱为您钱包安全保驾护航....',
    background: 'rgba(0,0,0,0.7)'
  })

  if (status === 'success') {
    request.put(`/api/order/IfPay?trackingNumber=${trackingNumber}&state=${status}`).then(res => {
      ElNotification({
        title: '成功',
        message: '订单提交成功',
        type: 'success',
      })
      loading.close();
      router.push('/user')
    })
  } else if (status === 'failure') {
    setTimeout(() => {
      loading.close();
    }, 3000)
    setTimeout(() => {
      ElNotification({
        title: '失败',
        message: '用户未完成支付',
        type: 'warning',
      })
    }, 3100)
  }
};
</script>
  
<style scoped>
.payment-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f7f7f7;
}

.container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  text-align: center;
}

.payment-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.qrcode-section {
  margin-top: 20px;
}

.qrcode-image {
  width: 100%;
  height: auto;
  border: 2px solid #ddd;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
}

.status-options {
  margin-top: 20px;
}

.status-button {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.success {
  background-color: #4caf50;
  color: white;
}

.failure {
  background-color: #f44336;
  color: white;
}

.status-message {
  margin-top: 15px;
  font-size: 16px;
  color: #333;
}
</style>